<template>
	<view @click="handlePlayAudioMessage" :class="'audio-message ' + (isMine ? 'my-audio' : '')">
		<image class="audio-icon" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/img/audio-msg.png"></image>
		<view class="audio " :style="'width: ' + 120 + 'rpx'">
			<text class="audio-text">{{ '" ' + message.payload.second }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				audio: {}
			};
		},
		props: {
			message: {
				type: Object,
				default: () => {}
			},
			isMine: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			message: {
				handler: function(newVal) {
					this.message = newVal
				},
				immediate: true,
				deep: true
			}
		},

		beforeMount() {
			this.audio = uni.createInnerAudioContext();
			this.audio.onPlay(() => {
				console.log('开始播放');
			});
			this.audio.onEnded(() => {
				console.log('停止播放');
			});
			this.audio.onError(e => {
				console.error(e, 'onError');
				// ios 音频播放无声，可能是因为系统开启了静音模式
				uni.showToast({
					icon: 'none',
					title: '该音频暂不支持播放'
				});
			});
		},

		methods: {
			handlePlayAudioMessage() {
				this.audio.src = this.message.payload.url;
				this.audio.play();
			}
		}
	};
</script>
<style lang="scss" scoped>
	.audio-text{
		font-size: 30rpx
	}
	.audio-message {
		@include flex(row);
		padding: 10rpx 18rpx;
		border-radius: 4rpx 20rpx 20rpx 20rpx;
		border: 1px solid #D9D9D9;
	}

	.audio-icon {
		width: 55rpx;
		height: 55rpx;
	}

	.my-audio {
		border-radius: 4rpx 20rpx 20rpx 20rpx;
		background: rgba(0, 110, 255, 0.10);
		border: 1px solid rgba(0, 110, 255, 0.30);
	}

	.audio {
		height: 60rpx;
		font-family: PingFangSC-Medium;
		font-size: 30rpx;
		color: #000000;
		line-height: 28rpx;
		@include flex(row);
		align-items: center;
		justify-content: flex-end;
	}
</style>
